<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
	<div id="content">
		<div class="a1">
			<a class="openModal" href="#">Open Modal</a>
		</div>
		<div class="a2">
			<a class="openModal1" href="#">Open Modal</a>
		</div>
		<div class="a3"></div>
		<div class="a4"></div>
		<div class="a5"></div>
		<div class="a6"></div>
		<div class="a7"></div>
		<div class="a8"></div>
		<div class="a9"></div>
		<div class="a10"></div>
	</div>
	<div id="modal1"><a class="closeModal">close</a></div>
	<div id="modal2"><a class="closeModal">close</a></div>

    <script type="text/javascript" src="js/jquery-1.4.2.min-js.js"></script>
    <script type="text/javascript" src="js/jQueryLightbox.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
        /*
        *   Center Modal
        ********************/
			$('.openModal').centerElement({
				selector: '#modal1',
				event: 'click'
			});

			$('.openModal1').centerElement({
				selector: '#modal2',
				event: 'mouseenter'
			});
		});
    </script>
</body>
</html>